Advanced CSS3 and HTML5

Introduction

Radical changes are taking place in the aesthetics and technology of Web design. New techniques have opened up due to increasing support for different design effects created with CSS3. Today we'll talk about two of those techniques—gradient backgrounds and custom fonts—and I'll explain how they can make your sites more attractive and engaging.

Using Gradient Backgrounds

When I say gradient backgrounds, I'm talking about backgrounds to pages, layout boxes, and other elements. In the figure below, I've applied a gradient to the body element background, the banner element background, and the right column element of our page layout.

Gradient backgrounds applied to the body, banner, and right column

Traditionally, designers created backgrounds like this in Adobe Illustrator, Adobe Photoshop, or another drawing application and then saved them as PNG or JPEG images. The designer then applied CSS coding to "tile," or repeat, the image from top to bottom or from right to left.

If you took the Intermediate CSS3 and HTML5 course, you learned to create gradient image backgrounds. That technique remains relevant, but CSS3 gradients are much more powerful and efficient.

They're more powerful because you can generate complex gradients that do more than blend from top to bottom, or right to left. Look closely at the gradient I applied to the banner in the image below. It's darker in the upper left, and it blends to lighter in the lower-right corner of the banner.

A more complex gradient background

CSS3 gradients are more efficient than old-style tiling images because there are no images involved! There's nothing to download. They're defined entirely in CSS3, and you'll be doing that yourself before this lesson is through.

Discovering Custom Fonts

Exhibit B in our survey of fast-downloading effects is the use of custom Web-based fonts (often just called Web fonts). Most of the time, Web designers still rely on a user's computer environment to supply font support. So if you apply the Forte font to a style definition, only visitors who have Forte installed on their computers would see that font. Most users would see a substitute font instead.

A substitute font

If you really needed to present text in Forte, you could create a graphic file and save it in JPEG or PNG (or GIF) format. This approach has many downsides, though. It isn't possible to copy and paste this graphical text. The user can't search for it. And using a graphic image to present text adds download time to a page.

The advanced Web design solution is to use custom Web-based fonts that allow us to use a wide range of font faces in our site design. These fonts work even for visitors who don't have the font installed on their computers.

Users have to download Web fonts. But the sources that supply these fonts have blazing-fast servers, so users aren't burdened with noticeable wait time, even with a 3G connection on a tablet or smartphone.

Using a Web font in a banner for a one-of-a-kind look

Applying CSS3 gradients and Web fonts isn't hard, and it gives you creative freedom with no extra download times for your users. So let's get going!

Creating Gradients for Different Browsers

In Chapter 1, I gushed over the virtues of using CSS3 gradients instead of tiling a gradient background image. With CSS3 gradients, what appears to the visitor as an image is something you created entirely with CSS3. But what about browsers that don't support CSS3?

Those browsers are declining in usage. Most designers have stopped creating pages that work in Internet Explorer 6, 7, and 8 because they've decided that it makes more sense to maximize design for contemporary-generation browsers.

IE 6, 7, and 8 (and to some extent IE 9) don't support CSS3 gradients. We'll apply the principle of "graceful degradation" for these older browsers. Visitors to our site whose browsers don't support CSS3 will simply see a solid-color background from our color scheme. That's not such a bad option. Their pages will still download quickly. The pages won't be innovative, but they won't be ugly either.

A CSS3 gradient background on the left defaults to a solid color in IE8.

Here's the basic syntax for a gradient property:

background: linear-gradient(<to direction> <color stop>, <color stop>);

Let's analyze this piece by piece.

• The property is background.
• The value is linear-gradient followed by a definition within parentheses.
• The to direction part of the value defines the direction of the color blend.
• The <color stop> sections define a color and control where that color becomes fully visible. (Why call this point a "stop"? That terminology comes from programs like Adobe Illustrator. But it's more helpful to think of that value as the point where a color can start or end.)

Let's break down a simple example. In the CSS code below, I've set the direction as "to bottom," meaning the gradient begins at the top of the element and ends at the bottom. I chose red as the first color, and it starts at 0%—the top of the element. The ending color for the gradient blend is yellow, and the background becomes fully yellow at 100% of the height of the element. In other words, the gradient ends at the bottom of the element.

background: linear-gradient(to bottom, red 0%,yellow 100%);

That's the generic syntax for defining a CSS3 gradient.

This generic syntax isn't complicated.Unfortunately, not all browsers don't yet have a single way to define CSS3 gradients . . . and at this writing, not all of them support the generic syntax . So we need different definitions for each browser.

To support all modern browsers, we need to create four versions of our CSS3 gradient syntax. They look like this:

background: -webkit-linear-gradient(<direction>, <color stop>, <color stop>); 
background: -moz-linear-gradient(<direction>, <color stop>, <color stop>); 
background: -o-linear-gradient(<direction>, <color stop>, <color stop>); 
background: -ms-linear-gradient(<direction>, <color stop>, <color stop>);

The -webkit prefix applies to Chrome and Safari. (Webkit is the underlying program that powers both those browsers.) The -moz prefix applies to Firefox—moz is short for Mozilla, the group that produces Firefox. The -o prefix applies to Opera. And the -ms prefix applies to Internet Explorer 10—the ms is short for Microsoft.

It's good practice to include that generic option as well, since someday all browsers may agree to use it.

We can transform my earlier simple example to one that works in all modern browsers with this code. Notice that all the browser-specific examples replace "to bottom" with "top."

background: -moz-linear-gradient(top, red 0%, yellow 100%); 
background: -webkit-linear-gradient(top, red 0%, yellow 100%); 
background: -o-linear-gradient(top, red 0%, yellow 100%); 
background: -ms-linear-gradient(top, red 0%, yellow 100%); 
background: linear-gradient(to bottom, red 0%, yellow 100%);

Finally, let's look at an option for older browsers. We'll define that background first, so browsers that can understand any of the other style declarations will overrule that background. The last readable declaration is the one that will apply. If you apply the gradient background to your body tag, the body tag definition will look something like this:

body {
background: yellow;
background: -moz-linear-gradient(top, red 0%, yellow 100%); 
background: -webkit-linear-gradient(top, red 0%, yellow 100%); 
background: -o-linear-gradient(top, red 0%, yellow 100%); 
background: -ms-linear-gradient(top, red 0%, yellow 100%); 
background: linear-gradient(to bottom, red 0%,yellow 100%);
font-family: Verdana, Geneva, Arial, sans-serif;
padding:0px;
margin:0px;
}

Notice that I've specified a font family so that someone using an older browser sees a substitute font that's at least somewhat similar to the font I'm using.

Changing Your Gradients

What about creating a horizontal gradient? To transform a gradient from top-to-bottom to left-to-right, replace "top"' with "left" in the prefixed declarations, and replace "to bottom" with "to right" in the generic.

background: yellow;
background: -moz-linear-gradient(left, red 0%, yellow 100%); 
background: -webkit-linear-gradient(left, red 0%, yellow 100%); 
background: -o-linear-gradient(left, red 0%, yellow 100%); 
background: -ms-linear-gradient(left, red 0%, yellow 100%); 
background: linear-gradient(to right, red 0%,yellow 100%);

The result is a linear gradient that starts with red and ends with yellow.

Applying a left-to-right gradient

So far, we've left the stop locations for our two colors at 0% (the top or left edge of the element) and 100% (the bottom or right edge). These settings produce a gradient that blends evenly across or down the element. But we can tweak stop locations to create interesting effects.

For example, I often use uneven stop locations (other than 0% and 100%) to create a column effect. If I change the stop for my second color from 100% to 33%, the transition takes only a third of the element to complete. Here's an example:

background: -moz-linear-gradient(left, aqua 0%, white 33%); 
background: -webkit-linear-gradient(left, aqua 0%, white 33%); 
background: -o-linear-gradient(left, aqua 0%, white 33%); 
background: -ms-linear-gradient(left, aqua 0%, white 33%); 
background: linear-gradient(to right, aqua 0%, white 33%);

And here's how that example looks if I apply it to the right-column div tag in our template page:

Adjusting the stop value on a gradient

Before we wrap up our exploration of linear gradients, let's explore how to create an angled gradient. To angle a gradient background, replace "left" or "top" with a defined angle value, and follow that (without a space) by "deg" because you're indicating the number of degrees.

Angle values can be positive (like 45deg) or negative (like -45deg).

Here's an example:

background: yellow;
background: -moz-linear-gradient(45deg, red 0%, yellow 100%); 
background: -webkit-linear-gradient(45deg, red 0%, yellow 100%); 
background: -o-linear-gradient(45deg, red 0%, yellow 100%); 
background: -ms-linear-gradient(45deg, red 0%, yellow 100%); 
background: linear-gradient(45deg, red 0%,yellow 100%);

And here's how that example looks applied to the right-column div tag in our template:

Applying an angle to a gradient

Linear gradients—those that blend from top to bottom, left to right, or at an angle—can make Web pages more inviting. They work particularly well in mobile devices, as we'll see in a later lesson. Can you see how these gradients could work in websites that you've created?

Let's move on to Chapter 3, where we'll talk about a different kind of gradient.

Radial Gradients for Dramatic Effect

Radial gradients blend from the inside of a circle or ellipse to the outside. In the example below, I drew on a technique from the Intermediate CSS3 and HTML5 class to add a border radius to the boxes in our template, and then I applied a radial gradient. So the boxes (now circles) each have a radial gradient, and the background still has the angled gradient from Chapter 2.

Applying a radial gradient

Use these gradients for emphasis and impact. If you overuse them, they become distracting. But use them judiciously, and they can add a lot of energy to a Web page.

Don't worry—I'll review how to turn our boxes into circles with CSS3 effects. But for now, let's focus on the radial gradient. It starts with one color in the middle (white in our example) and radiates out to the end color (dark gray in our example) at the outer edge.

It's possible to hand-code the CSS for radial gradients, but it's even easier to use one of the online tools for generating CSS3.

Online CSS3 gradient generators let you define gradients in a WYSIWYG-type interactive environment. (WYSIWYG means What You See Is What You Get. In other words, you can see the results immediately instead of guessing or repeatedly testing your changes.) For instance, at the Ultimate CSS Gradient Generator, you can use gradient stops like this one:

Defining a gradient interactively at the Ultimate CSS Gradient Generator

I've included information about online gradient generators in the Supplementary Material, so feel free to visit the different sites and experiment with dramatic or subtle gradients.

These online gradient generating tools provide a preview box like the one in the figure below. As you fiddle with your gradient definition, you can see how it looks.

Previewing a gradient at Ultimate CSS Gradient Generator

Why didn't we start this Lesson with online CSS3 gradient generating tools? I delayed introducing them for a couple of reasons. One is that the overwhelming majority of CSS3 gradients are simple linear gradients. Between vertical, horizontal, and angled gradient blends, you can do a lot. Also, by defining simpler CSS3 gradients "by hand," you got to know the basic CSS3 syntax involved. When we generate complicated CSS3 syntax, you'll be able to understand it.

Defining a Border Radius

One fun effect is to apply a CSS3 radial gradient to CSS3 rounded rectangles. The combined effect creates spheres that have a 3-D look. So before we actually generate radial gradients, here's the CSS3 code I promised that will convert our boxes into circles:

.box {
height: 100px;
width: 100px;
float: left;
margin: 15px;
padding: 25px;
opacity:.5;
border-radius: 75px;
}

Let me take a moment to review the beginning-to-intermediate CSS3 here. The border-radius attribute is a CSS3 style property that creates rounded corners. The length of the radius defines how rounded the corner is. In the example above, the total width and height of our box remains at 150 pixels (100 pixels plus 25 pixels padding on all sides). By defining a border radius that's half the total width of the box, we convert the box into a circle.

How Do These Fancy Gradients Affect Download Time?

Remember, we're creating circular backgrounds here without using graphic images. That means the download time for these "images" is zero seconds on the slowest 3G connection. Of course, you and I know that these aren't really images . . . they just look like images. But we'll keep that advanced Web design secret between us, right?

If you're working through this lesson as we go, be sure to apply these techniques to your template page. If you do that, the radial gradients we're about to define will fit nicely into your CSS3 circle "boxes."

Defining Gradients With the Ultimate CSS3 Gradient Generator

We're going to use the Ultimate CSS3 Gradient Generator, which works only with current-generation versions of Firefox, Chrome, Safari, or IE. I've provided links to alternative gradient generators in the Supplementary Material.

The tools for generating CSS3 gradients at the Ultimate CSS3 Gradient Generator are mostly self-explanatory. So I'll provide a compressed orientation and introduction and encourage you to experiment on your own. Then we'll review the code that the site generates.

Open the gradient editor at http://www.colorzilla.com/gradient-editor. You'll see many preset gradients. Often a good way to create a complex gradient is to choose a premade one that's close to what you want and then edit it. We'll use that approach to create a basic radical gradient.

1. Go to the Presets section near the top of the page. Click the Brown Gloss preset in the third row.
   
   While the documentation at the Ultimate CSS3 Gradient Generator indicates it works with Internet Explorer 9 and 10, some users have reported problems with these browsers. If you run into issues using IE, you'll have a smoother experience using Chrome or Firefox. Microsoft provides its own CSS3 gradient generator that has many of the features in the Ultimate CSS3 Gradient Generator. You'll find a link to the Microsoft version in the Supplementary Material.

Choosing a preset

2. This preset has four stops. Let's simplify it. Drag the two middle stops off the bar by clicking on each one and pulling it to the bottom of your screen.

Removing stops from a gradient

3. Double-click the first (left) stop. A color box opens. You can choose a color or enter a hexadecimal value from the color scheme we created in Lesson 3. After you choose a color, click OK.

Redefining a gradient stop color

4. In a similar way, redefine the color for the second stop.
5. In the Preview area on the right-hand side of the screen, define the preview area as 150 by 150 to emulate the size of the box we're designing a background for. Set the orientation to radial. (By the way, selecting the Internet Explorer check box in the Preview region of the screen displays how the effect would look in IE 9.)

Defining a preview size

6. Find the box of generated CSS code on the right-hand side of the page. Choose hex from the drop-down list of color codes, and uncheck the Comments and IE support check boxes to simplify the code.

What Does That Internet Explorer Check Box Do?

Checking the IE check box creates code that works in Internet Explorer 9. It also adds quite a bit of complexity and introduces SVG image coding. SVG, or Scalable Vector Graphics, is an image format that works well with animated or interactive sites, but examining its image coding is beyond the scope of our class. Just keep in mind that the Ultimate CSS Gradient Generator creates all the code you need in case you decide to provide the SVG option.

7. Hover over the generated CSS, and click Copy to copy the code to your clipboard. You'll see a little message with a check mark that says Copied to clipboard.

Copying the CSS code for a radial gradient

8. Paste the copied CSS code inside the style definition for the .box class style in our style sheet. Save your CSS file, and open your template in a browser to test the radial gradient.

When you test the page in a browser, the radial gradient should display when you hover over the box.

Testing the radial gradient hover effect

There's an almost unlimited set of options for defining gradients at the Ultimate CSS Gradient Generator. I encourage you to play with it or with another online gradient generator. These sites allow you to quickly and easily generate sophisticated gradients without having to learn Adobe Illustrator or other complex, expensive programs. And they're fun!

Our class project is looking more colorful, as you can see in this video. (I left the orientation as vertical rather than radial, so you can see the difference.) But the fonts are still dull. Let's work on those next.

Surveying and Selecting Web Fonts

Typographers and amateurs have created thousands of fonts. But until recently, Web designers pretty much stuck to fonts that most people have on their computers. As I mentioned in Chapter 1, the only fonts users could see on a Web page were ones that the user's computer supplied. So designers who included custom fonts within Web pages were—for the most part—wasting their time.

There are other reasons Web design is more restrained in the use of fonts than print design is. Even cheap home printers, like mine, print at 300 dots per inch. But computer monitors have much lower resolutions—typically less than 100 dots per inch. So complex fonts break down in digital display.

Aesthetically, Web pages are smaller than many print projects (posters or newspapers, for instance). At least, the section of a page that the user sees at any one time is smaller. Using a variety of fonts in a print project often creates a messy-looking design. That rule applies to multiple fonts on a Web page too. It's rarely appropriate to use more than two fonts within a Web page.

Having said all that, fonts are fun. They add variety and distinctiveness to a site. In Lesson 1, I used www.keithrichards.com as an example of a site where the custom font is integral to the experience.

One more thing has kept many designers away from custom fonts: Until recently, commercial enterprises such as Fonts.com and Adobe licensed most catalogs of Web fonts. But Google has made hundreds of fonts available for free, which opens the door to many more people using custom fonts in Web projects.

By the way, you may have seen or heard about the @font property in style sheets. Web fonts actually don't require that. They get assigned just like any other font in a style sheet, as values for the font-family property. And Web fonts don't come with color attributes. You assign color to Web fonts just as you would any other font.

Linking to a Font at Google Fonts

There are two steps to using free Web fonts from Google Fonts: defining the font, and applying it in your page. Let's start with defining the font. In your browser, go to http://www.google.com/fonts, and follow these steps:

1. Notice that the site shows the Sentence tab by default. (The sample sentence is about grumpy wizards and an evil queen, which seems odd, but it uses all the letters in the alphabet.) Using this tab is the best way to preview fonts, but there are also options for word, paragraph, or poster. You can also change the preview text and the text size.

Viewing Google Web fonts in sentences

2. Scroll down the list of fonts until you find one you like. You've got hundreds to choose from, and many are available in different styles and weights.
3. Click the Add to Collection button associated with that font.

Adding a Google font to your collection

4. Click the Use button at the bottom of the page.

Clicking the Use button for a Google font

5. In the Use page, examine the options:

• The "1" area allows you to choose additional styles for your font (if any available) and indicates the impact on page download time. Normally you can accept the default settings for this.
• The "2" area lets you add extended character sets if those are available. Here again, you can normally accept default settings.
• The "3" and "4" areas have code we'll use in our HTML and CSS files. Copy the HTML in Step 3 into your clipboard, and keep this page open in your browser.

Copying HTML

Applying a Google Font to a Web Page

Now that you've selected a font, the next step is to paste the copied HTML into the <head> element in our HTML file. Follow these steps to do that:

1. Click within your HTML file in the <head> element. A good place is right after the link to your style.css style sheet:

<link rel="stylesheet" type="text/css" href="style.css">

2. Your HTML will vary depending on which font you chose. I chose the Gabriela font, so mine looks like this:

<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'>

3. After you add the link to the Google style sheet, save your HTML page. Next, open your CSS file (style.css if you're using our template).
4. Toggle back to the Google Fonts page, and copy the CSS style into your clipboard. The CSS is in step "4" of the Google Fonts Use page.

Copying CSS

5. Toggle back to your code editor, and confirm that the style.css style sheet (or whatever your style sheet is) is still open.
6. Use the copied CSS to add the font to any style definition. Here's an example of applying the style to the <h2> tag, and I'm going to define a color here as well:

H2 {

font-family:'Gabriela', Arial, serif;

color:white;

}

7. Save your CSS file.
8. Our template HTML file had an <h2> element for a second-level heading. If your HTML file doesn't have one, add one. Here's an example:

<h2>Right Column Heading Here </h2>

9. Save your HTML file if necessary, and open your page in a browser to test your custom font. Here's what I got:

Testing a custom font

Of course, your results will vary depending on which font you chose.

Be sure to visit the Supplementary Material for information on Web fonts. As I mentioned, many are available for free.

Do you see why I covered these two topics in the same lesson? Gradients and custom fonts can really make a difference in the look and feel of your site.

Take a look at this video, which reviews how to include a Google font in your website. By the way, you'll note in the video that I've created a CSS style for the <h1> element, and I'm applying this custom font to that style. But you can use the same technique to add our custom font to any style definition in your CSS style sheet file.

Summary

Try this game to see how well you remember what we've covered.

Today we explored two cutting-edge techniques for creating one-of-a-kind Web pages: CSS3 gradient backgrounds and Web fonts. Both these techniques open up new freedom for designers without creating undue accessibility issues.

CSS3 gradient backgrounds download into a user's computer faster than traditional image-based backgrounds do. They work in every current-generation browser . . . which means that they work in every mobile device. For older browsers, you can substitute a solid-color background for the gradient. You can do that by simply opening a style definition with a solid-color background, like this:

 background-color:beige;

Current-generation browsers will ignore that background color because they'll recognize one of the CSS3 gradient background color definitions that follow in the style rule.

Then we discussed custom Web-based fonts. In most design environments, Web fonts provide the easiest and most reliable solution to expanding the set of available fonts beyond those that are almost sure to be on a user's computer. We still combine them with a font family so that if for some reason the Web font doesn't load, there's a substitute font defined.

Web fonts don't rely on anything new in CSS3 or HTML5. What's new is that they're widely available online from sources like Google and Adobe, and in many cases they're free.

If you use custom fonts and gradient backgrounds with discretion—in other words, if you don't overuse them—they're valuable components of advanced Web design and inviting, accessible Web pages.